import 'package:PollOnLine/ui/home/home_state.dart';
import 'package:PollOnLine/utils/logger_utils.dart';
import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../../bean/UserTask.dart';
import '../../../utils/list/refresh.dart';
import '../../../values/MyColors.dart';
import 'task_list_logic.dart';

/// 任务列表
class TaskListPageIpad extends StatefulWidget {
  final String title;
  final Tabs tab;

  const TaskListPageIpad({Key? key, required this.title, required this.tab}) : super(key: key);

  @override
  State<TaskListPageIpad> createState() => _TaskListPageIpadState();
}

class _TaskListPageIpadState extends State<TaskListPageIpad> with AutomaticKeepAliveClientMixin {
  late final String status; // 0全部  1进行中  2截止  3已完成
  @override
  void initState() {
    super.initState();
    status = widget.tab.id.toString();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<TaskListLogic>(
        init: TaskListLogic(status),
        // global: false,
        tag: status,
        builder: (logic) {
          return OrientationBuilder(builder: (context, orientation) {
            return SmartRefresher(
              controller: logic.refreshController,
              //  允许下拉刷新
              enablePullDown: true,
              // 允许上拉加载
              enablePullUp: true,
              // 刷新
              onRefresh: logic.onRefresh,
              // 加载
              onLoading: logic.onLoading,
              header: ClassicHeader(height: Get.statusBarHeight + 44.r, textStyle: TextStyle(fontSize: 10.r, color: Colors.grey)),
              footer: ClassicFooter(height: Get.bottomBarHeight + 40.r, textStyle: TextStyle(fontSize: 10.r, color: Colors.grey)),
              child: orientation == Orientation.portrait
                  ? ListView.builder(
                      padding: EdgeInsets.only(top: 5.r),
                      itemCount: logic.state.userTask?.content?.length ?? 0,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                          margin: EdgeInsets.only(bottom: 6.r),
                          child: ListItem(logic.state.userTask!.content![index], logic),
                        );
                      },
                    )
                  : GridView.builder(
                      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                        crossAxisSpacing: 5.r,
                        mainAxisSpacing: 5.r,
                        childAspectRatio: 2.58,
                        maxCrossAxisExtent: 284.r,
                      ),
                      padding: EdgeInsets.only(top: 5.r),
                      itemCount: logic.state.userTask?.content?.length ?? 0,
                      itemBuilder: (BuildContext context, int index) {
                        return ListGridItem(logic.state.userTask!.content![index], logic);
                      },
                    ),
            );
          });
        });
  }

  Widget ListGridItem(Content item, TaskListLogic logic) {
    return SizedBox(
      child: BrnShadowCard(
        color: Colors.white,
        spreadRadius: 0.r,
        child: Container(
            padding: EdgeInsets.only(top: 15.r, bottom: 15.r, left: 10.r, right: 15.r),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    BrnTagCustom(
                      tagText: logic.getStatus(item)['tagText'],
                      textColor: logic.getStatus(item)['textColor'],
                      backgroundColor: logic.getStatus(item)['bgColor'],
                      fontSize: 9.r,
                      textPadding: EdgeInsets.symmetric(vertical: 1.r, horizontal: 6.r),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 3.r),
                      child: Text(
                        "截止时间${item.endTime}",
                        style: TextStyle(color: MyColors.FF333333, fontSize: 9.r),
                      ),
                    ),
                  ],
                ),
                Text(
                  "${item.taskName}",
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                  style: TextStyle(color: MyColors.FF313336, fontSize: 12.r, fontWeight: FontWeight.bold),
                ),
                Row(
                  children: [
                    SizedBox(
                      width: 60.r,
                      height: 22.r,
                      child: item.status == "1"
                          ? BrnNormalButton(
                              text: '继续填写',
                              fontSize: 10.r,
                              textColor: Colors.white,
                              backgroundColor: MyColors.FF1060DD,
                              insertPadding: const EdgeInsets.all(0),
                              alignment: Alignment.center,
                              borderRadius: BorderRadius.circular(3.r),
                              onTap: () {
                                logic.goToNextPoll(item.taskId);
                              },
                            )
                          : BrnNormalButton.outline(
                              text: "查看结果",
                              fontSize: 10.r,
                              textColor: MyColors.FF1060DD,
                              lineColor: MyColors.FF1060DD,
                              backgroundColor: Colors.white,
                              insertPadding: const EdgeInsets.all(0),
                              alignment: Alignment.center,
                              radius: 3.r,
                              onTap: () {
                                logic.goToNextPoll(item.taskId);
                              },
                            ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 6.5.r),
                      child: Text("调查样本: ${item.writeCount}/${item.collectCount}", style: TextStyle(color: MyColors.FF666666, fontSize: 9.r)),
                    ),
                    Expanded(
                      child: Padding(
                        padding: EdgeInsets.only(left: 5.r),
                        child: LayoutBuilder(builder: (context, constraints) {
                          return Center(
                            child: ClipRRect(
                              borderRadius: BorderRadius.all(Radius.circular(1.5.r)),
                              child: BrnProgressChart(
                                key: UniqueKey(),
                                width: constraints.maxWidth.r,
                                height: 3.r,
                                value: (item.writeCount ?? 0) / (item.collectCount ?? 1),
                                showAnimation: true,
                                colors: [logic.getStatus(item)['proColor'], logic.getStatus(item)['proColor']],
                                backgroundColor: MyColors.FFE5E5E5,
                                brnProgressIndicatorBuilder: (BuildContext context, double value) {
                                  return const Text('');
                                },
                              ),
                            ),
                          );
                        }),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 3.5.r),
                      child: Text(logic.getPercent(item.writeCount, item.collectCount), style: TextStyle(color: MyColors.FF888888, fontSize: 9.r)),
                    )
                  ],
                ),
              ],
            )),
      ),
    );
  }

  Widget ListItem(Content item, TaskListLogic logic) {
    return SizedBox(
      height: 85.r,
      child: BrnShadowCard(
        color: Colors.white,
        spreadRadius: 0.r,
        child: Container(
            padding: EdgeInsets.only(top: 15.r, bottom: 12.r, left: 10.r, right: 15.r),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          BrnTagCustom(
                            tagText: logic.getStatus(item)['tagText'],
                            textColor: logic.getStatus(item)['textColor'],
                            backgroundColor: logic.getStatus(item)['bgColor'],
                            fontSize: 9.r,
                            textPadding: EdgeInsets.symmetric(vertical: 1.r, horizontal: 6.r),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 8.r),
                            child: Text(
                              "${item.endTime}截止",
                              style: TextStyle(color: MyColors.FF333333, fontSize: 9.r),
                            ),
                          ),
                        ],
                      ),
                      Text(
                        "${item.taskName}",
                        overflow: TextOverflow.clip,
                        maxLines: 2,
                        style: TextStyle(color: MyColors.FF313336, fontSize: 12.r, fontWeight: FontWeight.bold),
                      ),
                      Row(
                        children: [
                          Text("调查样本: ${item.writeCount}/${item.collectCount}", style: TextStyle(color: MyColors.FF666666, fontSize: 9.r)),
                          Padding(
                            padding: EdgeInsets.only(left: 5.r),
                            child: ClipRRect(
                              borderRadius: BorderRadius.all(Radius.circular(100.r)),
                              child: BrnProgressChart(
                                key: UniqueKey(),
                                width: 75.r,
                                height: 3.r,
                                value: (item.writeCount ?? 0) / (item.collectCount ?? 1),
                                showAnimation: true,
                                colors: [logic.getStatus(item)['proColor'], logic.getStatus(item)['proColor']],
                                backgroundColor: MyColors.FFE5E5E5,
                                brnProgressIndicatorBuilder: (BuildContext context, double value) {
                                  return const Text('');
                                },
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 3.5.r),
                            child: Text(logic.getPercent(item.writeCount, item.collectCount),
                                style: TextStyle(color: MyColors.FF888888, fontSize: 13.r)),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  width: 60.r,
                  height: 22.r,
                  child: item.status == "1"
                      ? BrnNormalButton(
                          text: '继续填写',
                          fontSize: 10.r,
                          textColor: Colors.white,
                          backgroundColor: MyColors.FF1060DD,
                          insertPadding: const EdgeInsets.all(0),
                          alignment: Alignment.center,
                          borderRadius: BorderRadius.circular(3.r),
                          onTap: () {
                            logic.goToNextPoll(item.taskId);
                          },
                        )
                      : BrnNormalButton.outline(
                          text: "查看结果",
                          fontSize: 10.r,
                          textColor: MyColors.FF1060DD,
                          lineColor: MyColors.FF1060DD,
                          backgroundColor: Colors.white,
                          insertPadding: const EdgeInsets.all(0),
                          alignment: Alignment.center,
                          radius: 3.r,
                          onTap: () {
                            logic.goToNextPoll(item.taskId);
                          },
                        ),
                )
              ],
            )),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<TaskListLogic>();
    super.dispose();
  }

  @override
  bool get wantKeepAlive => true;
}
